<template>
    <div class="order-box">
        <van-nav-bar title="我的订单" fixed left-text="返回" left-arrow @click-left="close">
            <template #right>
                <van-icon name="fire-o" color="#ee0a24" size="20"/>
            </template>
        </van-nav-bar>
        <van-tabs @change="onChangeTab" :color="'#1baeae'" :title-active-color="'#1baeae'" class="order-tab"
                  v-model="status">
            <!-- 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单 -->
            <van-tab title="全部" name='-1'></van-tab>
            <van-tab title="待付款" name="0"></van-tab>
            <van-tab title="待发货" name="1"></van-tab>
            <van-tab title="待收货" name="2"></van-tab>
            <van-tab title="已完成" name="3"></van-tab>
        </van-tabs>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="order-list-refresh">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    @offset="300"
            >
                <div v-for="(item, index) in list" :key="index" class="order-item-box">
                    <div class="order-item-header">
                        <span>订单时间：{{item.createTime | formatDate}}</span>
                        <span>{{ item.status | filterStatus }}</span>
                    </div>
                    <van-card
                            v-for="(one, index) in item.orderItemList"
                            :key="index"
                            :num="one.productQuantity"
                            v-lazy="one.productPrice"
                            :desc="one.promotionName"
                            :title="one.productName"
                            :thumb="prefix(one.productPic)"
                    >
                        <template #footer v-if="index === item.orderItemList.length - 1">
                            <van-button size="mini" @click="goTo(item.id)">查看详情</van-button>
                            <van-button size="mini" type="warning" @click="delOrder(item.id)">删除订单</van-button>
                        </template>
                    </van-card>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import sHeader from '../../components/SimpleHeader'
    import {getOrderList, deleteOrder} from '../../api/order'
    import {prefix} from '../../common/js/utils'
    import {Dialog, Toast} from 'vant'

    export default {
        name: "index",
        data() {
            return {
                status: -1,
                loading: false,
                finished: false,
                refreshing: false,
                list: [],
                page: 1
            }
        },
        components: {
            sHeader
        },
        async mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                getOrderList({pageNum: this.page, pageSize: 100, status: this.status}).then(res => {
                    const result = res.data;
                    this.list = result.data;
                    this.totalPage = result.totalPage
                    this.loading = false;
                    if (this.page >= result.totalPage) {
                        this.finished = true
                    }
                }).catch(err => {
                    this.finished = true;
                })
            },
            onChangeTab(name, title) {
                this.status = name
                this.onRefresh()
            },
            goTo(id) {
                this.$router.push({path: `order-detail?id=${id}`}).catch(err => {
                })
            },
            close() {
                this.$router.push('/user')
            },
            onLoad() {
                if (!this.refreshing && this.page < this.totalPage) {
                    this.page = this.page + 1
                }
                if (this.refreshing) {
                    this.list = [];
                    this.refreshing = false;
                }
                this.loadData()
            },
            onRefresh() {
                this.refreshing = true
                this.finished = false
                this.loading = true
                this.page = 1
                this.onLoad()
            },
            delOrder(id) {
                Dialog.confirm({
                    title: '删除',
                    message: '删除订单后无法恢复记录，请谨慎操作',
                })
                    .then(() => {
                        deleteOrder(id).then(res => {
                            if (res.data < 0) {
                                Toast.fail(res.msg);
                            }
                            this.loadData();
                        })
                    })
                    .catch(() => {
                        // on cancel
                    });

            }
        },
        filters: {
            //订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单
            filterStatus(value) {
                if (value === 0) {
                    return '待付款';
                } else if (value === 1) {
                    return '待发货';
                } else if (value === 2) {
                    return '已发货';
                } else if (value === 3) {
                    return '已完成';
                } else if (value === 4) {
                    return '已关闭';
                } else if (value === 5) {
                    return '无效订单';
                }
            }
        }
    }
</script>


<style lang="less" scoped>
    @import '../../common/style/mixin';

    .order-box {
        .order-header {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 10000;
            .fj();
            .wh(100%, 44px);
            line-height: 44px;
            padding: 0 10px;
            .boxSizing();
            color: #252525;
            background: #fff;
            border-bottom: 1px solid #dcdcdc;

            .order-name {
                font-size: 14px;
            }
        }

        .order-tab {
            margin-top: 44px;
            position: fixed;
            left: 0;
            z-index: 1000;
            width: 100%;
        }

        .order-list-refresh {
            margin-top: 68px;

            .van-card__content {
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .van-pull-refresh__head {
                background: #f9f9f9;
            }

            .van-list {
                min-height: calc(100vh - 88px);
                background: #f9f9f9;
                margin-top: 20px;
            }

            .order-item-box {
                margin: 20px 10px;
                background-color: #fff;

                .order-item-header {
                    padding: 10px 20px 0 20px;
                    display: flex;
                    justify-content: space-between;
                }

                .van-card {
                    background-color: #fff;
                    margin-top: 0;
                }
            }
        }
    }
</style>
